<template>
  <v-navigation-drawer
    id="app-drawer"
    permanent
    :mini-variant="showRight"
    mini-variant-width="76"
    app
    class="nav-con">
    <v-row class="fill-height" no-gutters>
      <v-navigation-drawer
        dark
        mini-variant
        mini-variant-width="76"
        permanent
      >
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/women/75.jpg"></v-img>
          </v-list-item-avatar>
        </v-list-item>
        <v-divider></v-divider>
        <v-list
          dense
          subheader
        >
          <v-list-item-group v-model="currentMod" mandatory color="primary" active-class="activeMod">
            <v-list-item
              v-for="item in menus"
              :key="item.title"
              @click="setDrawer(false)"
            >
              <v-list-item-action class="align-center">
                <v-icon>{{item.icon}}</v-icon>
                <small>{{ generateTitle(item.title) }}</small>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>

      
      <v-list class="grow" dense subheader v-show="!showRight">
        <v-subheader style="height: 56px;">
          <span class="pl-2 text-h6 font-weight-medium something">{{ generateTitle(menus[currentMod]['name']) }}</span>
        </v-subheader>
        <v-list-item-group v-model="currentMenu" mandatory color="primary" active-class="activeMenu">
          <template  v-for="link in links">
            <template v-if="link.children && link.children.length > 0">
              <v-list-group
                :key="link.name"
                value="true"
                >
                <template v-slot:activator>
                  <v-list-item-title>{{ generateTitle(link.name) }}</v-list-item-title>
                </template>
                <v-list-item
                  v-for="(item, i) in link.children"
                  :key="i"
                  :to="{name: item.name}"
                  link
                >
                  <v-list-item-title class="pl-2">{{ generateTitle(item.name) }}</v-list-item-title>
                </v-list-item>
              </v-list-group>
            </template>
            <template v-else>
              <v-list-item
                :key="link.name"
                :to="{name: link.name}"
                link
              >
                <v-list-item-content>
                  <v-list-item-title>{{ generateTitle(link.name) }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </template>
          
        </v-list-item-group>
      </v-list>
    </v-row>
  </v-navigation-drawer>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex'
import { generateTitle } from '@/utils/i18n'
export default {
  data() {
    return {
      currentMod: 0,
      currentMenu: 0,
    }
  },

  computed: {
    ...mapState('permission', ['routes']),
    menus: {
      get() {
        return this.routes.filter(item => !item.hidden).map(item => {
          return {
            ...item,
            ...item.meta
          }
        })
      }
    },
    links: {
      get() {
        let current = this.menus[this.currentMod]
        if (current) {
          return current.children.filter(item => !item.hidden).map(item => {
            return {
              ...item,
              path: current.path !== '/' ? current.path + '/' + item.path : '/' + item.path
            }
          })
        }
        return []
      }
    },
    showRight: {
      get () {
        return this.$store.state.app.drawer
      },
      set (val) {
        this.setDrawer(val)
      }
    }
  },

  mounted() {
    this.currentMod = this.menus.findIndex(item => {
      if (item.path !== '/') {
        return this.$route.path.indexOf(item.path) > -1
      } else {
        return this.$route.path.indexOf(item.redirect) > -1
      }
    }) || 0
  },

  methods: {
    generateTitle,
    ...mapMutations('app', ['setDrawer']),
  }
}
</script>

<style>
  .v-navigation-drawer__content {
    overflow: hidden !important;
  }
  .v-application--is-ltr .nav-con .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
    margin-right: 0;
  }
  .v-application--is-ltr .nav-con .v-list-item__avatar:first-child, .v-application--is-rtl .v-list-item__action:last-of-type:not(:only-child), .v-application--is-rtl .v-list-item__avatar:last-of-type:not(:only-child), .v-application--is-rtl .v-list-item__icon:last-of-type:not(:only-child) {
    margin-right: 0;
  }
</style>

<style lang="scss" scoped>
  .something {
    color: var(--v-primary-base);
    /* background-color: var(--v-accent-lighten2); */
  }
  .activeMenu {
    border-right: 2px solid;
  }
  .activeMod {
    position: relative;
    background: rgba(255,255,255, .2);
    &::before {
      width: 0;
      height: 0;
      content: "";
      position: absolute;
      right: 0 !important;
      left: auto;
      top: 25px;
      border-top: 7px solid transparent;
      border-right: 7px solid white;
      border-bottom: 7px solid transparent;
      opacity: 1 !important;
      background: transparent;
      transition: none;
    }
  }
</style>